<template>
    <div class="topConponent">
        <!-- pc端显示：hidden-sm-and-down -->
        <div class="topVue_2 hidden-sm-and-down">
            <div class="topInner mg0 flex-between align-center">
                <div class="flex align-center">
                    <img src="../assets/logo.png" style="width: 30px; height: 30px;">
                    <span style="color: #1D2129; padding-left: 6px; font-size: 14px; font-weight: 600;">衣勾选</span>
                </div>
                <div class="flex align-center" v-if="isShow">
                    <span style="color: #1D2129; font-size: 14px; cursor: pointer;" @click="navigate('Agreement')">用户协议</span>
                    <span style="padding: 0 15px; font-size: 12px;">|</span>
                    <span style="color: #1D2129; font-size: 14px;  cursor: pointer;" @click="navigate('Privacy')">隐私条款</span>
                </div>
            </div>
        </div>

        <!-- 移动端显示：hidden-md-and-up -->
        <div class="topVue_1 hidden-md-and-up flex-between align-center pad-row15">
            <div class="flex align-center">
                <img src="../assets/logo.png" style="width: 20px; height: 20px;">
                <span style="color: #1D2129; padding-left: 6px; font-size: 12px; font-weight: 600;">衣勾选</span>
            </div>
            <div class="flex align-center" v-if="isShow">
                <span style="color: #1D2129; font-size: 12px;" @click="navigate('Agreement')">用户协议</span>
                <span style="padding: 0 10px; font-size: 10px;">|</span>
                <span style="color: #1D2129; font-size: 12px;" @click="navigate('Privacy')">隐私条款</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    props: {
        isShow: {
            type: Boolean,
            default: true
        }
    },
    methods: {
        navigate(name){
            this.$router.push({
                name: name
            })
        },
    }
}
</script>

<style lang="less">
    .topConponent {
        width: 100%;
        position: fixed;
        left: 0;
        top: 0;
        background: #fff;
        z-index: 99;
        .topVue_1 {
            width: 100%;
            height: 40px; 
        }
        .topVue_2 {
            width: 100%;
            height: 60px;
            .topInner {
                width: 1660px;
                height: 60px;
            }
        }
    }
</style>